// Element Plus 主题定制

// 覆盖 Element Plus 默认变量
:root {
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-1: #{lighten($primary-color, 10%)};
  --el-color-primary-light-2: #{lighten($primary-color, 20%)};
  --el-color-primary-light-3: #{lighten($primary-color, 30%)};
  --el-color-primary-light-4: #{lighten($primary-color, 40%)};
  --el-color-primary-light-5: #{lighten($primary-color, 50%)};
  --el-color-primary-light-6: #{lighten($primary-color, 60%)};
  --el-color-primary-light-7: #{lighten($primary-color, 70%)};
  --el-color-primary-light-8: #{lighten($primary-color, 80%)};
  --el-color-primary-light-9: #{lighten($primary-color, 90%)};
  --el-color-primary-dark-2: #{darken($primary-color, 20%)};
}

// 自定义 Element Plus 组件样式
.el-menu {
  &--horizontal {
    border-bottom: none;
  }
  
  .el-menu-item {
    &.is-active {
      color: $primary-color !important;
      border-bottom-color: $primary-color !important;
    }
    
    &:hover {
      color: $primary-color !important;
    }
  }
  
  .el-sub-menu__title {
    &:hover {
      color: $primary-color !important;
    }
  }
}

.el-button {
  &--primary {
    background-color: $primary-color;
    border-color: $primary-color;
    
    &:hover {
      background-color: $primary-hover;
      border-color: $primary-hover;
    }
    
    &:active {
      background-color: darken($primary-color, 10%);
      border-color: darken($primary-color, 10%);
    }
  }
}

.el-input {
  &.is-focus {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px $primary-color inset;
    }
  }
}

.el-select {
  .el-input {
    &.is-focus {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px $primary-color inset;
      }
    }
  }
}

.el-checkbox {
  &.is-checked {
    .el-checkbox__input {
      .el-checkbox__inner {
        background-color: $primary-color;
        border-color: $primary-color;
      }
    }
    
    .el-checkbox__label {
      color: $primary-color;
    }
  }
}

.el-radio {
  &.is-checked {
    .el-radio__input {
      .el-radio__inner {
        border-color: $primary-color;
        background-color: $primary-color;
      }
    }
    
    .el-radio__label {
      color: $primary-color;
    }
  }
}

.el-switch {
  &.is-checked {
    .el-switch__core {
      background-color: $primary-color;
    }
  }
}

.el-slider {
  .el-slider__runway {
    .el-slider__bar {
      background-color: $primary-color;
    }
    
    .el-slider__button {
      border-color: $primary-color;
    }
  }
}

.el-pagination {
  .el-pager {
    .number {
      &.is-active {
        background-color: $primary-color;
        color: #fff;
      }
    }
  }
  
  .btn-next,
  .btn-prev {
    &:hover {
      color: $primary-color;
    }
  }
}

.el-date-picker {
  .el-picker-panel__content {
    .el-date-table {
      td.today {
        .el-date-table-cell__text {
          color: $primary-color;
        }
      }
      
      td.current:not(.disabled) {
        .el-date-table-cell__text {
          background-color: $primary-color;
        }
      }
    }
  }
}

.el-time-picker {
  .el-time-panel {
    .el-time-spinner__item {
      &.is-active {
        color: $primary-color;
      }
    }
  }
}

.el-tabs {
  .el-tabs__nav-wrap {
    &::after {
      background-color: $border-light;
    }
  }
  
  .el-tabs__item {
    &.is-active {
      color: $primary-color;
    }
    
    &:hover {
      color: $primary-color;
    }
  }
  
  .el-tabs__active-bar {
    background-color: $primary-color;
  }
}

.el-steps {
  .el-step {
    &.is-process {
      .el-step__head {
        .el-step__icon {
          background-color: $primary-color;
          border-color: $primary-color;
        }
      }
      
      .el-step__title {
        color: $primary-color;
      }
    }
    
    &.is-finish {
      .el-step__head {
        .el-step__icon {
          background-color: $primary-color;
          border-color: $primary-color;
        }
      }
      
      .el-step__title {
        color: $primary-color;
      }
      
      .el-step__line {
        background-color: $primary-color;
      }
    }
  }
}

// 自定义卡片样式
.el-card {
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-light;
  
  &.is-always-shadow {
    box-shadow: $box-shadow-base;
  }
  
  &.is-hover-shadow {
    &:hover {
      box-shadow: $box-shadow-dark;
    }
  }
}

// 自定义表格样式
.el-table {
  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: $bg-light;
        color: $text-primary;
        font-weight: 600;
      }
    }
  }
  
  .el-table__body-wrapper {
    .el-table__body {
      tr {
        &:hover {
          background-color: $primary-lightest;
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: $breakpoint-sm) {
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto !important;
  }
  
  .el-drawer {
    width: 90% !important;
  }
  
  .el-table {
    font-size: $font-size-small;
  }
}
